<template>
  <div class="bottomRight">
    <div class="bg-color-black" :class="warnShadow">
      <div class="header">锅炉房数据检测</div>
      <div v-if="!isStop" class="content">
        <div class="flexcenter">
          <chart2 :cdata="cdata.cdata1" />
          <chart2 :cdata="cdata.cdata2" />
          <chart2 :cdata="cdata.cdata4" />
          <chart2 :cdata="cdata.cdata3" />
        </div>

        <div class="foot">
          <div>
            <HdItem title="燃烧器状态" style="display: inline-flex">
              <n-radio-group
                v-model:value="rsqzt1.value"
                disabled
                style="
                  --n-height: 29px;
                  --n-font-size: 18px;
                  --n-opacity-disabled: 1;
                "
              >
                <n-radio-button value="0000" label="启动" />
                <n-radio-button value="1111" label="停止" />
              </n-radio-group>
            </HdItem>
            <HdItem title=" 模式" style="display: inline-flex">
              <n-radio-group
                v-model:value="rsqzt2.value"
                disabled
                style="
                  --n-height: 29px;
                  --n-font-size: 18px;
                  --n-opacity-disabled: 1;
                "
              >
                <n-radio-button value="00" label="自动" />
                <n-radio-button value="11" label="手动" />
              </n-radio-group>
            </HdItem>
          </div>
          <HdItem
            v-for="item in store.state.chartData.filter((o) => o.isShow)"
            :title="item.label"
            :value="item.value"
            :options="item.options"
            :data="item"
          >
          </HdItem>
        </div>
      </div>
      <div v-else>
        <div
          style="
            font-size: 35px;
            text-align: center;
            height: 300px;
            font-weight: 700;
            letter-spacing: 24px;
            padding-top: 130px;
          "
        >
          停机
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  defineProps,
  reactive,
  onMounted,
  ref,
  onUnmounted,
  useAttrs,
  computed,
} from "vue";
import { useStore } from "vuex";
// import Chart from "./chart/draw";
import Chart2 from "./chart/draw2";
import HdItem from "@/components/HdItem/index.vue";
import { NRadioButton, NRadioGroup } from "naive-ui";

const store = useStore();
const attrs = useAttrs();
console.log(attrs);
const cdata = reactive({
  seriesData: [],
  pythonData: store.state.chartData,
  cdata1: {},
  cdata2: {},
  cdata3: {},
  cdata4: {},
});
let warnShadow = computed(() => {
  let re = "";
  let tmp = store.getters.getParamsByKey("yxzt_0602");
  if (
    (tmp && tmp.value == "3") ||
    store.getters.getWarnInfo.filter((o) => o.key != "zt").length > 0
  ) {
    return "warnShadow";
  } else {
    return "";
  }
});

let isStop = ref(false);

const tmp = store.state.chartData.filter((o) => o.key === "yxzt_0602");
if (tmp[0] && tmp[0].value == "3") {
  warnShadow.value = "warnShadow";
  isStop.value = false;
}
let height = "200px";
let width = "200px";
// 燃烧器状态
let rsqzt1 = computed(() => {
  return store.getters.getParamsByKey("bit11_bit8");
});
let rsqzt2 = computed(() => {
  return store.getters.getParamsByKey("bit15_bit14");
});
// 锅炉水位
cdata.cdata1 = computed(() => {
  let tmp = store.getters.getParamsByKey("glywzt_060B");
  return {
    seriesData: [{ name: "锅炉水位", value: tmp.value }],
    data: tmp,
    height,
    width,
  };
});
// 水槽水位
cdata.cdata4 = computed(() => {
  let tmp = store.getters.getParamsByKey("clz_0000");
  return {
    seriesData: [{ name: "水槽水位", value: tmp.value }],
    data: tmp,
    height,
    width,
  };
});

// 锅炉压力状态
cdata.cdata2 = computed(() => {
  let tmp = store.getters.getParamsByKey("gltlzt_060D");
  return {
    seriesData: [{ name: "锅炉压力", value: tmp.value }],
    data: tmp,
    height,
    width,
  };
});

// 蒸汽压力值
cdata.cdata3 = computed(() => {
  let tmp = store.getters.getParamsByKey("zqyl_0115");
  return {
    seriesData: [{ name: "蒸汽压力", value: tmp.value }],
    data: tmp,
    height,
    width,
  };
});

// // 排烟温度
// cdata.cdata3 = computed(() => {
//   let tmp = store.getters.getParamsByKey("pywd_0101");
//   return {
//     seriesData: [{ name: "排烟温度", value: tmp.value }],
//     data: tmp,
//     height,
//     width,
//   };
// });

cdata.seriesData = computed(() => {
  return store.state.chartData;
});
</script>

<style lang="scss" class scoped>
$box-height: 100%;
$box-width: 100%;

.bottomRight {
  // padding: 14px 16px;
  padding: 6px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .header {
    font-size: 22px;
    font-family: cursive;
    font-weight: 700;
    padding: 10px;
  }

  .flexcenter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
  }

  .content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
  }

  .foot {
    flex: 0 0 480px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 20px;
    ::v-deep .n-radio-group .n-radio-button {
      padding-left: 8px;
      padding-right: 8px;
    }
  }

  .bg-color-black {
    height: calc($box-height - 0px);
    border-radius: 10px;
    overflow: hidden;
  }

  .text {
    color: #c3cbde;
  }

  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 300px;

    .active-ring-name {
      padding-top: 10px;
    }
  }
}

.warnShadow {
  border-radius: 10px;
  animation: warnShadow 1s infinite alternate;
}

@keyframes warnShadow {
  from {
    box-shadow: 0px 0px 20px 5px #c11616 inset;
  }

  to {
    box-shadow: 0px 0px 50px 10px #c11616 inset;
  }
}
</style>
